<template>
  <div class="cart">
    <div class="cart-item" v-for="(p,i) in products" :key="p.id" >
        <span>{{ i + 1 }}</span>
        <span>{{ p.name }}</span>
        <span>{{ p.price }}</span>
    </div>
  </div>
</template>

<script>
export default {
    name: 'Cart' ,
    props: {
        products: {
            // 明确 prop attribute 的类型
            type: Array ,
            // 明确 prop attribute 是否必须指定
            required: true
        }
    }
}
</script>

<style>
.cart {
    margin: 15px ;
    border: 1px solid blue ; 
}
.cart-item {
    display: flex ;
    margin: 15px ;
    border: 1px solid #dedede ;
}
.cart-item>span:first-child {
    flex-basis: 100px ;
}
.cart-item>span:nth-child(2) {
    flex-basis: 300px ;
}
.cart-item>span:last-child {
    flex-basis: 100px ;
}
</style>